<extend name="Public:base"/>
<block name="body">

    <style type="text/css">
        #body {
            width: 95%;
            background: white;
            border-radius: 10px;
            margin: 2.5%;
            position: relative;
        }

        .add_button {
            margin: 20px 30px;
            height: 40px;
            width: 150px;
        }

        .top_input_button {
            width: 300px;
            height: 42px;
        }

        tr > td > span {
            margin: 5px;
            color: #00aaee;
        }

        thead > tr > th {
            text-align: center;
        }

        #data_tr > td {
            text-align: center;
        }
    </style>
    <h2 style="color: #b9b9b9;margin: 50px"><b>群微信号管理</b></h2>
    <div id="body">
        <button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-default add_button ">新增群微信号
        </button>

        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            新增群微信号
                        </h4>
                    </div>
                    <div class="modal-body">
                        <form action="" enctype="multipart/form-data" onsubmit="return false">
                            <p style="font-size: 16px;"><span style="color: red">*</span>群微信号名称</p>
                            <input style="width: 100%" id="name" type="text" class="form-control top_input_button"
                                   placeholder="请输入微信名称" aria-describedby="sizing-addon1">
                            <p style="font-size: 16px;margin-top: 20px;"><span style="color: red">*</span>上传图片</p>
                            <input type="file" id="file">
                            <div style="width: 150px;height: 150px;position: relative;left: 200px;bottom: 30px;">
                                <img id="is_img" src="" width="100%" height="100%" onerror="imgSrc(this)">
                            </div>
                            <p style="font-size: 16px;"><span style="color: red">*</span>扫码关注上线</p>
                            <input type="text" id="key" class="form-control top_input_button" placeholder="请输入扫码上限数"
                                   aria-describedby="sizing-addon1">
                            <p style="font-size: 16px;"><span style="color: red">*</span>有效期</p>
                            <input type="text" id="time" class="form-control top_input_button form_datetime" placeholder="请选择二维码有效时间"
                                   aria-describedby="sizing-addon1">

                            <p style="text-align: center">
                                <button type="button" id="add_one_code" class="btn btn-default add_button ">新增群微信号
                                </button>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div style="position: absolute;right: 115px;top:20px">
            <input type="text" id="like_code" class="form-control top_input_button" placeholder="请输入活码项目名称"
                   aria-describedby="sizing-addon1">
        </div>
        <div style="position: absolute;right: 20px;top:0">
            <button type="button" id="like" class="btn btn-default  add_button" style="width: 60px">搜索</button>
        </div>

        <div class="row" style="margin-left: 15px;width: 97%">
            <div class="col-xs-12">
                <table class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th>群微信号名称</th>
                        <th>扫码上限</th>
                        <th>今日浏览人数</th>
                        <th>今日长按识别人数</th>
                        <th>状态</th>
                        <th>累计长按识别人数</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <volist name="data" id="vo">
                        <tr id="data_tr" style="overflow: hidden">
                            <td>{$vo.name}</td>
                            <td>{$vo.key}</td>
                            <td>{$vo.is_today_kan}</td>
                            <td>{$vo.is_today_an}</td>
                            <td>{$vo.type}</td>
                            <td>{$vo.is_an}</td>
                            <td>
                                <span onclick="group_table('{$vo.id}','edit')">管理 </span>
                                <span onclick="group_table('{$vo.id}','auth')">统计</span>
                                <span onclick="group_table('{$vo.id}','select')">查看二维码 </span>
                                <span onclick="group_table('{$vo.id}','del','{$vo.del}')"><?php echo $vo['del']==1?'停用':'启用'; ?></span>
                            </td>
                        </tr>
                    </volist>
                    </tbody>
                </table>
                {$page}
                <!-- PAGE CONTENT ENDS -->
            </div><!-- /.col -->
        </div>

    </div>

    <script>
        $(".form_datetime").datetimepicker({
            language:  'zh-CN',
            format: 'yyyy-mm-dd',//显示格式
            todayHighlight: 1,//今天高亮
            minView: "month",//设置只显示到月份
            startView:2,
            forceParse: 0,
            showMeridian: 1,
            autoclose: 1//选择后自动关闭
        });
        var imgUrl = '';
        var fileM = document.querySelector("#file");
        $("#file").on("change", function () {
            var fileObj = fileM.files[0];
            var formData = new FormData();
            formData.append('file', fileObj);

            $.ajax({
                url: 'upLoad',
                type: 'post',
                contentType: false,
                data: formData,
                processData: false,
                success: function (res) {
                    $('#is_img').attr('src', res);
                    $('#is_img').css('display', 'block');
                    imgUrl = res;
                }
            });
        });

        function imgSrc(a) {
            a.onerror = null;
            a.src = '/Public/lib/img/tishi.png';
        }

        $('#add_one_code').click(function () {
            var name = $('#name').val();
            var key = $('#key').val();
            var id = '{$id}';
            var time=$('#time').val();
            if (name == '') {
                bootbox.alert(title = "请输入群微信号名称");
                return false;
            } else if (key == '') {
                bootbox.alert(title = "请输入扫码上限人数");
                return false;
            }else if (time == '') {
                bootbox.alert(title = "请输入二维码有效期");
                return false;
            } else if (imgUrl == '') {
                bootbox.alert(title = "请上传二维码");
                return false;
            }
            $.post(
                'ones', {
                    name: name,
                    img: imgUrl,
                    key: key,
                    time:time,
                    group_id: id,
                    type: 0
                }, function (res) {
                    if (res.code) {
                        bootbox.alert(title = res.msg);
                        setTimeout(function () {
                            location.reload();
                        }, 1500)
                    } else {
                        bootbox.alert(title = res.msg);
                    }
                }
            )
        });

        function group_table(id, event, del = '') {
            if (event === 'edit') {
                $.post('select_img', {id: id}, function (res) {
                    bootbox.alert({
                        title: "查看二维码",
                        message: '<form action="" enctype="multipart/form-data" onsubmit="return false">' +
                            '<p style="font-size: 16px;"><span style="color: red">*</span>群微信号名称</p>' +
                            '<input style="width: 100%" id="edit_name" value="' + res.name + '" type="text" class="form-control top_input_button" placeholder="请输入微信名称" aria-describedby="sizing-addon1">' +
                            '<p style="font-size: 16px;margin-top: 20px;"><span style="color: red">*</span>上传图片</p>' +
                            '<input type="file" id="edit_file">' +
                            '<div style="width: 150px;height: 150px;position: relative;left: 200px;bottom: 30px;">' +
                            '<img id="edit_img" src="' + res.img + '" width="100%" height="100%">' +
                            '</div>' +
                            '<p style="font-size: 16px;"><span style="color: red">*</span>扫码关注上线</p>' +
                            '<input type="text" id="edit_key" value="' + res.key + '" class="form-control top_input_button" placeholder="请输入扫码上限数" aria-describedby="sizing-addon1">' +
                            '<p style="text-align: center">' +
                            '<p style="font-size: 16px;"><span style="color: red">*</span>有效期</p>' +
                            '<input type="text" id="edit_time" value="' + res.time + '" class="form-control top_input_button form_datetime" aria-describedby="sizing-addon1">' +
                            '<button type="button" id="edit_one_code" class="btn btn-default add_button ">保存</button>' +
                            '</p>' +
                            '</form>'
                    });
                    var imageUrl = '';
                    var files = document.querySelector("#edit_file");
                    $("#edit_file").on("change", function () {
                        var fileObj = files.files[0];
                        var formData = new FormData();
                        formData.append('file', fileObj);
                        $.ajax({
                            url: 'upLoad',
                            type: 'post',
                            contentType: false,
                            data: formData,
                            processData: false,
                            success: function (res) {
                                $('#edit_img').attr('src', res);
                                $('#edit_img').css('display', 'block');
                                imageUrl = res;
                            }
                        });
                    });
                    $(".form_datetime").datetimepicker({
                        language:  'CN',
                        format: 'yyyy-mm-dd',//显示格式
                        todayHighlight: 1,//今天高亮
                        minView: "month",//设置只显示到月份
                        startView:2,
                        forceParse: 0,
                        showMeridian: 1,
                        autoclose: 1//选择后自动关闭
                    });
                    $('#edit_one_code').click(function () {
                        var name = $('#edit_name').val();
                        var key = $('#edit_key').val();
                        var time = $('#edit_time').val();
                        if (name == '') {
                            bootbox.alert(title = "请输入个人微信号名称");
                            return false;
                        } else if (key == '') {
                            bootbox.alert(title = "请输入扫码上限人数");
                            return false;
                        } else if (imageUrl == '') {
                            imageUrl = res.img;
                        }
                        $.post(
                            'edits_code', {
                                name: name,
                                img: imageUrl,
                                key: key,
                                time:time,
                                id: res.id,
                            }, function (data) {
                                if (data.code) {
                                    bootbox.alert(title = data.msg);
                                    setTimeout(function () {
                                        location.reload();
                                    }, 1500)
                                } else {
                                    bootbox.alert(title = data.msg);
                                }
                            }
                        )
                    });
                })

            } else if (event === 'auth') {
                window.location.href = '{:U("Dxadmin/Statistics/index")}?id=' + id + '&type=2&auth=2';
            } else if (event === 'select') {
                $.post(
                    'select_img',
                    {id: id},
                    function (res) {
                        bootbox.alert({
                            title: "查看二维码",
                            message: "<p><h2 style='text-align: center'>" + res.name + "</h2></p>" +
                                "<div style='width: 300px;height:300px;margin:auto;'><img id='downImg' src='" + res.img + "' width='100%' height='100%'></div>" +
                                "<p style='text-align: center' onclick='downloadCode()'><span style='font-size: 30px;color: #ff9a36' class='glyphicon glyphicon-save' aria-hidden='true'></span></p>"
                        });
                    }
                );
            } else if (event === 'del') {
                $.post('del', {id: id, key: del}, function (res) {
                    if (res.code) {
                        bootbox.alert({
                            title: "系统提示",
                            message: res.msg
                        });
                        setTimeout(function () {
                            window.location.reload()
                        }, 2000)
                    } else {
                        bootbox.alert({
                            title: "系统提示",
                            message: '网络繁忙，操作失败'
                        });
                    }
                })
            }
        }

        function downloadCode() {
            var img = $('#downImg').attr("src");
            window.location.href = '{:U("Dxadmin/OneCode/url")}?url=' + img
        }

        $('#like').click(function () {
            like = $('#like_code').val();
            window.location.href = '{:U("Dxadmin/OnesCode/ones")}?like=' + like + '&id={$id}';
        })

    </script>
</block>